<template>
  <div class="content-box">
    <nav-title title="家庭情况" />
    <div class="line">
      <span class="important">*</span>
      <div class="label">姓名</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="name">
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">性别</div>
      <div class="value">
        <group label-width="5em">
          <popup-picker :data="sexList" placeholder="请选择" :columns="sexLength" v-model="sex" show-name></popup-picker>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">关系</div>
      <div class="value">
        <group label-width="5em">
          <popup-picker :data="relationShipList" placeholder="请选择" :columns="relationShipLength" v-model="relationShip" show-name></popup-picker>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">工作单位</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="company">
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">职务</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="position">
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">联系电话</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="phone">
      </div>
    </div>
    <div class="submit-btn" @click="save">
      保存
    </div>
    <div class="remove-btn" @click="remove">
      删除
    </div>
  </div>

</template>

<script>
import { Datetime, Group, PopupPicker } from 'vux'
import { saveFamily,delFamily,getDicItem } from '../../../api/api'
import { json2Form } from '../../../util/http'

export default {

  name: 'input-information',
  components: {
    Datetime, Group, PopupPicker
  },
  mounted(){
    //获取字典
    this.getDic();
  },
  methods: {
    getDic(){
      //性别字典
      getDicItem({fileName: 'SEX'}).then(res=>{
        if(res && res.retCode === '000000'){
          for(let i=0; i<res.retData.length; i++){
            this.sexList.push({name: res.retData[i].xlatshortname,value: res.retData[i].fieldvalue});
          }
          this.sexLength = res.retData.length;
        }
      }).catch(res=>{

      });
      //关系字典
      getDicItem({fileName: 'C_RELATION_FAM'}).then(res=>{
        if(res && res.retCode === '000000'){
          for(let i=0; i<res.retData.length; i++){
            this.relationShipList.push({name: res.retData[i].xlatshortname,value: res.retData[i].fieldvalue});
          }
          this.relationShipLength = res.retData.length;
        }
        
      }).catch(res=>{

      })

    },
    save(){
      if(this.name === ''){
        this.$vux.alert.show({
          title: '警告',
          content: '请输入姓名'
        });
        return;
      }
      if(this.relationShip.length === 0){
        this.$vux.alert.show({
          title: '警告',
          content: '请选择关系'
        });
        return;
      }

      var params = {
        'rsHireId': '123456',
        'cPhone': this.phone,
        'cName': this.name,
        'cFamilySex': this.sex,
        'cRelationFam': this.relationShip,
        'cCompany': this.company,
        'cPosition': this.position
      }

      saveFamily(json2Form(params)).then(res => {
        const that = this;
        //成功：000000
        if(res && res.retCode === '000000' ){
          //保存成功
          // 显示
          this.$vux.alert.show({
            title: '新城',
            content: '保存成功',
            onHide () {
              that.$router.push('/');
            }
          })

        }else{
          // 显示
          this.$vux.alert.show({
            title: '',
            content: res.retMsg
          })
        }
      }).catch (res=>{
        this.$vux.alert.show({
          title: '警告',
          content: '网络异常，请稍后重试'
        })
      })
    },
    remove(){
      let params = {

      };

      this.$vux.confirm.show({
          // 组件除show外的属性
          title: '提示',
          content: '确定删除？',
          onCancel () {
          },
          onConfirm () {
            delFamily(json2Form(params)).then(res=>{
              const that = this;
              //成功：000000
              if(res && res.retCode === '000000' ){
                //删除成功
                this.$vux.alert.show({
                  title: '新城',
                  content: '删除成功',
                  onHide () {
                    that.$router.push('/');
                  }
                })
              }else{
                // 显示
                this.$vux.alert.show({
                  title: '',
                  content: res.retMsg
                })
              }

            })
            .catch(res=>{
              this.$vux.alert.show({
                title: '',
                content: '网络异常，请稍后重试'
              })
            })

            
          }
        })

    }

  },
  data() {
    return {
      sexList: [],
      sexLength: 1,
      sex: [],

      relationShipList: [],
      relationShipLength: 1,
      relationShip: [],

      name: '',
      company: '',
      position: '',
      phone: ''
    }
  }
}

</script>
<style type="text/scss" lang="scss" scoped>
.content-box {
  padding: 0 10px;
  .important {
    width: 10px;
    color: red;
  }
  .line {
    display: flex;
    border-bottom: 1px solid #cccccc;
    line-height: 40px;
    .label {
      flex: 3;
      text-align: left;
      font-size: 14px;
    }

    .value {
      flex: 3;
      font-size: 13px;
      text-align: right;
      display: flex;
      justify-content: flex-start;
      color: #707070;
      input {
        width: 100%;
        padding-left: 15px;
      }
    }
    .controls-box {
      flex: 3;
      text-align: left;
      .controls {
        display: inline;
      }
    }
    .select-control {
      flex: 3;
      text-align: left;
    }
    .date-control {
      flex: 3;
      text-align: left;
    }
    // .icon {
    //   flex: 1;
    //   text-align: right;
    // }
  }

  .submit-btn {
    position: absolute;
    bottom: 35px;
    background-color: #07bc4b;
    color: white;
    font-size: 16px;
    font-weight: 900;
    line-height: 32px;
    width: 110px;
    height: 32px;
    // margin-left: -100px;
    left: 15%;
    box-shadow: 3px 3px 5px #888888;
  }

  .remove-btn {
    position: absolute;
    bottom: 35px;
    background-color: #ff6633;
    color: white;
    font-size: 16px;
    font-weight: 900;
    line-height: 32px;
    width: 110px;
    height: 32px;
    // margin-left: -100px;
    left: 55%;
    box-shadow: 3px 3px 5px #888888;
  }

  .title {
    font-size: 20px;
    font-weight: 900;
    color: #25262d;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
 {
  opacity: 0;
}
</style>
